---
title: SvgRenderer SVG渲染器
icon: Monitor
relatedFile: app/src/core/render/canvas2d/basicRenderer/svgRenderer.tsx
---

这个服务用于在 HTML Canvas 上高效地渲染 SVG 图像。它通过缓存已加载的 SVG 图像来优化性能，避免重复加载和解析相同的 SVG 数据。基于 `Project` 实例来访问画布上下文和相机缩放信息，以及 `Vector` 来处理位置坐标。

## 缓存机制

该服务维护一个内部 `svgCache` 对象，用于存储已加载的 SVG 图像。当请求渲染一个 SVG 时，它首先检查缓存中是否已存在该 SVG 对应的 `HTMLImageElement`。

- 如果存在，则直接使用缓存中的图像进行绘制。
- 如果不存在，则创建一个新的 `Image` 对象，将 SVG 字符串编码为 Data URL 并设置为图像的 `src`。图像加载完成后，会将其存储到缓存中，以便后续使用。

## API

### 渲染方法

#### `renderSvgFromLeftTop(svg: string, location: Vector, width: number, height: number): void`

此方法用于将 SVG 图像渲染到画布上，并指定其左上角的位置、宽度和高度。

- `svg`: 要渲染的 SVG 字符串。
- `location`: 一个 `Vector` 对象，表示 SVG 图像左上角的坐标。
- `width`: SVG 图像的渲染宽度。
- `height`: SVG 图像的渲染高度。

#### `renderSvgFromCenter(svg: string, centerLocation: Vector, width: number, height: number): void`

此方法用于将 SVG 图像渲染到画布上，并指定其中心点的位置、宽度和高度。

- `svg`: 要渲染的 SVG 字符串。
- `centerLocation`: 一个 `Vector` 对象，表示 SVG 图像中心点的坐标。
- `width`: SVG 图像的渲染宽度。
- `height`: SVG 图像的渲染高度。

#### `renderSvgFromLeftTopWithoutSize(svg: string, location: Vector, scaleNumber = 1): void`

此方法用于将 SVG 图像渲染到画布上，并指定其左上角的位置。图像的尺寸将根据其原始尺寸、项目的相机当前缩放比例以及一个可选的额外缩放因子来自动计算。

- `svg`: 要渲染的 SVG 字符串。
- `location`: 一个 `Vector` 对象，表示 SVG 图像左上角的坐标。
- `scaleNumber`: 可选参数，一个额外的缩放因子，默认为 1。

#### `renderSvgFromCenterWithoutSize(svg: string, centerLocation: Vector): void`

此方法用于将 SVG 图像渲染到画布上，并指定其中心点的位置。图像的尺寸将根据其原始尺寸和项目的相机当前缩放比例来自动计算。

- `svg`: 要渲染的 SVG 字符串。
- `centerLocation`: 一个 `Vector` 对象，表示 SVG 图像中心点的坐标。
